
.logo
  position: relative
  margin: 0 1.5rem 0 $column-gutter/2
  float: left
  a
    display: block
    width: 100px
    height: $top-height
    z-index: 999
    outline: none
    text-indent: -9999px
    transition: background-color 200ms ease
    background: url() 0 50% no-repeat

    &:hover
      background: $cream-light url() 50% no-repeat

    .enterprise &
      width: 232px
      background: url() 0 50% no-repeat
      &:hover
        background-image: url()

  .centered &
    margin-left: 0

.top
  background-color: #f1f1f1
  .enterprise &
    background-color: #333333  

.topbar
  font-size: $font-size-m
  color: $grey-light

  .navigation
    padding: 0
    margin: 0
    height: $top-height
    list-style: none
    li
      display: inline-block
      margin-right: 1rem

    .toggle
      float: right
      margin-top: .6em
      
      @media #{$large-up}
        display: none

  a
    display: block
    color: $grey-medium
    font-size: $font-size-sm
    cursor: pointer
    height: $top-height
    line-height: $top-height + 2px
    border: none
    text-decoration: none
    &:hover
      text-decoration: underline
    .enterprise &
      color: white
      &:hover
        color: $grey-medium
        text-decoration: none
